<template>
    <base-panel>
        <top-simple-search @addFun="toAdd" @click="toSearch"></top-simple-search>
        <simple-table ref="myTable" :tree-props="{ children: 'children' }" :formatter="dataFormatter">
            <el-table-column align="left" prop="name" label="名称"/>
            <el-table-column align="left" width="150" label="操作">
                <template slot-scope="{row}">
                    <edit-button @click="toEdit(row)"></edit-button>
                    <delete-button @click="toDelete(row.id)"></delete-button>
                </template>
            </el-table-column>
        </simple-table>
        <detail-dialog :visible.sync="visible" :categoryList="categoryList" v-if="visible" @reloadList="getList" :row="currRow" :disabled="disabled"></detail-dialog>
    </base-panel>

</template>
<script>
    import DetailDialog from "./DetailDialog";
    import simpleTable from "@/mixins/SimpleTable";
    import XEUtils from "xe-utils";
    import category from "@/api/onlineRepair/category";
    export default {
        mixins:[simpleTable],
        components: {DetailDialog},
        data(){
            return{
                listVisible:false,
                categoryList:[]
            }
        },
      created() {
          this.getCategoryList()
      },
      methods:{
          getCategoryList(){
            category.getList().then(res=>{
              console.log("  res.data   " ,res.data)
              this.categoryList =  this.handleTree(res.data,"id", "parent");
              console.log(" 38 ----  ",this.categoryList)
            })
          },
            dataFormatter(data) {
                return XEUtils.toArrayTree(data, {strict: true, parentKey: 'parent', key: 'id', children: 'children'});
            },
            toShowList(row){
                this.currRow = row
                this.listVisible = true
            }
        }
    }
</script>
